<!-- subpkg_consult/order_list/components/order-list.vue -->
<script lang="ts" setup>
  import { orderListApi } from '@/pages/apis/consult'
  import type { OrderItem } from '@/types/consult'
  import { ref } from 'vue'

  const props = withDefaults(defineProps<{ type: number }>(), { type: 1 })
  // 分页页码
  const current = ref('1')
  // 每页数据条数
  const pageSize = ref('5')
  // 订单列表
  const orderList = ref<OrderItem[]>()
  // 加载状态提示
  const loadingStatus = ref('loading')
  // 获取知识列表
  const getOrderList = async () => {
    loadingStatus.value = 'loading'
    const res = await orderListApi({
      type: props.type,
      current: current.value,
      pageSize: pageSize.value,
    })
    console.log(res)
    orderList.value = res.rows
  }
  getOrderList()
  // 去咨询
  const gotoZiXun = () => {
    uni.navigateTo({
      url: '/subpkg_consult/room/index',
    })
  }
</script>

<template>
  <scroll-view refresher-enabled refresher-background="#f6f6f6" class="uni-scroll-view" scroll-y>
    <view class="consult-list">
      <view class="consult-list-item" v-for="item in orderList" :key="item.id">
        <view class="consult-header">
          <view class="label">
            <image class="doctor-avatar" :src="item.docInfo?.avatar" v-if="item.docInfo?.avatar" />
            <image class="doctor-avatar" v-else src="/static/uploads/doctor-avatar.jpg" />
            <text>{{ item.docInfo?.name }}</text>
          </view>
          <text v-if="item.status === 1" class="status color-1">待支付</text>
          <text v-if="item.status === 2" class="status color-2">待接诊</text>
          <text v-if="item.status === 3" class="status color-2">咨询中</text>
          <text v-if="item.status === 4" class="status color-3">已完成</text>
          <text v-if="item.status === 5" class="status color-3">已取消</text>
        </view>

        <navigator
          class="consult-body"
          hover-class="none"
          :url="`/subpkg_consult/order_detail/index?id=${item.id}`"
        >
          <uni-list :border="false">
            <uni-list-item :border="false" title="病情描述" :right-text="item.illnessDesc" />
            <uni-list-item :border="false" title="价格" :right-text="`¥${item.payment}`" />
            <uni-list-item :border="false" title="创建时间" :right-text="item.createTime" />
          </uni-list>
        </navigator>

        <view v-if="item.status === 1" class="consult-footer">
          <button class="uni-button minor">取消订单</button>
          <button class="uni-button">去支付</button>
        </view>
        <view v-if="item.status === 2" class="consult-footer">
          <button class="uni-button minor">取消订单</button>
          <button class="uni-button" @click="gotoZiXun">继续咨询</button>
        </view>
        <view v-if="item.status === 3" class="consult-footer">
          <button class="uni-button">继续咨询</button>
        </view>
        <view v-if="item.status === 4" class="consult-footer">
          <button class="uni-button minor">问诊记录</button>
          <button v-if="item.evaluateFlag === '1'" class="uni-button minor">查看评价</button>
          <button v-else class="uni-button">去评价</button>
        </view>
        <view v-if="item.status === 5" class="consult-footer">
          <button class="uni-button minor">删除订单</button>
          <button class="uni-button">咨询其它医生</button>
        </view>
      </view>

      <!-- 加载状态 -->
      <uni-load-more
        status="loading"
        color="#C3C3C5"
        :icon-size="16"
        :content-text="{
          contentdown: '上拉显示更多',
          contentrefresh: '数据正在加载中',
          contentnomore: '没有更多数据了',
        }"
      />
    </view>
  </scroll-view>
</template>

<style lang="scss">
  @import './styles.scss';
</style>
